<template>
	<div class="ListContainer">
		<div @click="closeRankingList" class="closeList">
			<svg
				t="1667566365652"
				class="icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="9895"
				width="25"
				height="25">
				<path
					d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z"
					p-id="9896"
					fill="#707070"></path>
			</svg>
		</div>
		<h2>排行榜</h2>
		<el-tabs
			v-model="activeName"
			type="border-card"
			stretch="true"
			@tab-click="handleClick">
			<el-tab-pane label="高分榜" name="first">
				<el-table :data="rankList_high" stripe style="width: 100%">
					<el-table-column
						type="index"
						:index="indexMethod"
						label="排名"
						width="60"
						align="center">
					</el-table-column>
					<el-table-column prop="username" label="昵称" width="180">
					</el-table-column>
					<el-table-column prop="score" label="分数" width="65">
					</el-table-column>
					<el-table-column prop="submitDate" label="时间" width="160">
						<!-- <i class="el-icon-time"></i> -->
					</el-table-column>
					<el-table-column label="成就" width="125">
						<template v-slot="scope">
							<AchimentBox :data="scope.row" />
						</template>
					</el-table-column> </el-table
			></el-tab-pane>
			<el-tab-pane label="实时榜" name="second"
				><el-table :data="rankList_time" stripe style="width: 100%">
					<el-table-column prop="username" label="昵称" width="240">
					</el-table-column>
					<el-table-column prop="score" label="分数" width="65">
					</el-table-column>
					<el-table-column prop="submitDate" label="时间" width="160">
						<!-- <i class="el-icon-time"></i> -->
					</el-table-column>
					<el-table-column label="成就" width="125">
						<template v-slot="scope">
							<AchimentBox :data="scope.row" />
						</template>
					</el-table-column> </el-table
			></el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import axios from 'axios';
	import AchimentBox from './AchimentBox';
	export default {
		data() {
			return {
				activeName: 'first',
				rankList_high: [],
				rankList_time: [],
			};
		},
		props: {
			score: Number,
			closeRankingList: Function,
		},
		components: {
			AchimentBox,
		},
		methods: {
			backHome() {
				this.$router.push({
					name: 'homepage',
				});
			},
			indexMethod(index) {
				if (index == 0)
					return (
						<svg
							t="1667555010993"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="2138"
							width="30"
							height="30">
							<path
								d="M287.762 124.318v252.871c0 123.331 100.905 224.238 224.238 224.238 123.331 0 224.238-100.907 224.238-224.238V124.318H287.762z"
								fill="#D81919"
								p-id="2139"></path>
							<path
								d="M379.487 124.318v149.434c0 72.882 59.63 132.513 132.513 132.513 72.882 0 132.513-59.631 132.513-132.513V124.318H379.487z"
								fill="#FACC60"
								p-id="2140"></path>
							<path
								d="M644.513 124.318v149.434c0 72.882-59.631 132.514-132.513 132.514-72.884 0-132.514-59.631-132.514-132.514V124.318h265.027m19.201-19.201H360.285v168.635c0 83.656 68.059 151.714 151.715 151.714s151.714-68.059 151.714-151.714V105.117z"
								fill="#FFFFFF"
								p-id="2141"></path>
							<path
								d="M512 622.736m-339.055 0a339.055 339.055 0 1 0 678.11 0 339.055 339.055 0 1 0-678.11 0Z"
								fill="#F8B643"
								p-id="2142"></path>
							<path
								d="M512 622.736m-250.074 0a250.074 250.074 0 1 0 500.148 0 250.074 250.074 0 1 0-500.148 0Z"
								fill="#FFF89F"
								p-id="2143"></path>
							<path
								d="M512 372.662c138.112 0 250.074 111.962 250.074 250.074S650.112 872.81 512 872.81c-138.113 0-250.074-111.962-250.074-250.074S373.888 372.662 512 372.662m0-24.001c-151.126 0-274.075 122.95-274.075 274.075S360.874 896.811 512 896.811s274.075-122.95 274.075-274.076S663.126 348.661 512 348.661z"
								fill="#FFFFFF"
								p-id="2144"></path>
							<path
								d="M786.015 124.319h-548.03c-17.08 0-31.055-13.975-31.055-31.055s13.975-31.055 31.055-31.055h548.029c17.08 0 31.055 13.975 31.055 31.055 0.001 17.08-13.974 31.055-31.054 31.055z"
								fill="#ffffff"
								p-id="2145"
								data-spm-anchor-id="a313x.7781069.0.i0"
								class="selected"></path>
							<path
								d="M556.594 800.727h-51.41V527.763l-68.956 39.578 0.408-51.41 82.827-48.147h37.131v332.943z"
								p-id="2146"></path>
						</svg>
					);
				if (index === 1)
					return (
						<svg
							t="1667555101415"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="2544"
							data-spm-anchor-id="a313x.7781069.0.i8"
							width="30"
							height="30">
							<path
								d="M287.762 124.318v252.871c0 123.331 100.905 224.238 224.238 224.238 123.331 0 224.238-100.907 224.238-224.238V124.318H287.762z"
								fill="#82A0AF"
								p-id="2545"></path>
							<path
								d="M379.487 124.318v149.434c0 72.882 59.63 132.513 132.513 132.513 72.882 0 132.513-59.631 132.513-132.513V124.318H379.487z"
								fill="#E0EAED"
								p-id="2546"></path>
							<path
								d="M644.513 124.318v149.434c0 72.882-59.631 132.514-132.513 132.514-72.884 0-132.514-59.631-132.514-132.514V124.318h265.027m19.201-19.201H360.285v168.635c0 83.656 68.059 151.714 151.715 151.714s151.714-68.059 151.714-151.714V105.117z"
								fill="#FFFFFF"
								p-id="2547"></path>
							<path
								d="M512 622.736m-339.055 0a339.055 339.055 0 1 0 678.11 0 339.055 339.055 0 1 0-678.11 0Z"
								fill="#9EC2F7"
								p-id="2548"></path>
							<path
								d="M512 622.736m-250.074 0a250.074 250.074 0 1 0 500.148 0 250.074 250.074 0 1 0-500.148 0Z"
								fill="#DDECF7"
								p-id="2549"></path>
							<path
								d="M512 372.662c138.112 0 250.074 111.962 250.074 250.074S650.112 872.81 512 872.81c-138.113 0-250.074-111.962-250.074-250.074S373.888 372.662 512 372.662m0-24.001c-151.126 0-274.075 122.95-274.075 274.075S360.874 896.811 512 896.811s274.075-122.95 274.075-274.076S663.126 348.661 512 348.661z"
								fill="#FFFFFF"
								p-id="2550"></path>
							<path
								d="M786.015 124.319h-548.03c-17.08 0-31.055-13.975-31.055-31.055s13.975-31.055 31.055-31.055h548.029c17.08 0 31.055 13.975 31.055 31.055 0.001 17.08-13.974 31.055-31.054 31.055z"
								fill="#ffffff"
								p-id="2551"
								data-spm-anchor-id="a313x.7781069.0.i9"
								class="selected"></path>
							<path
								d="M623.478 748.689v42.438h-218.7v-34.684l128.12-130.562c13.599-13.599 23.256-25.839 28.97-36.723 5.71-10.875 8.569-22.576 8.569-35.092 0-17.949-5.241-32.233-15.708-42.836-10.477-10.613-24.685-15.915-42.639-15.915-16.594 0-30.465 4.285-41.617 12.849-11.157 8.569-19.177 20.748-24.071 36.517l-37.947-22.435c7.346-22.576 19.993-39.785 37.947-51.616 17.949-11.832 40.394-17.752 67.32-17.752 20.945 0 39.644 4.285 56.102 12.854 16.454 8.569 29.237 20.542 38.355 35.908 9.108 15.371 13.669 32.711 13.669 52.024 0 18.498-4.631 35.43-13.876 50.796-9.249 15.371-24.343 33.803-45.288 55.287l-86.09 88.944h146.884z"
								p-id="2552"></path>
						</svg>
					);
				if (index === 2)
					return (
						<svg
							t="1667555198577"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="2854"
							width="30"
							height="30">
							<path
								d="M287.762 124.318v252.871c0 123.331 100.905 224.238 224.238 224.238 123.331 0 224.238-100.907 224.238-224.238V124.318H287.762z"
								fill="#BF4C19"
								p-id="2855"></path>
							<path
								d="M379.487 124.318v149.434c0 72.882 59.63 132.513 132.513 132.513 72.882 0 132.513-59.631 132.513-132.513V124.318H379.487z"
								fill="#DC8C57"
								p-id="2856"></path>
							<path
								d="M644.513 124.318v149.434c0 72.882-59.631 132.514-132.513 132.514-72.884 0-132.514-59.631-132.514-132.514V124.318h265.027m19.201-19.201H360.285v168.635c0 83.656 68.059 151.714 151.715 151.714s151.714-68.059 151.714-151.714V105.117z"
								fill="#FFFFFF"
								p-id="2857"></path>
							<path
								d="M512 622.736m-339.055 0a339.055 339.055 0 1 0 678.11 0 339.055 339.055 0 1 0-678.11 0Z"
								fill="#FCC181"
								p-id="2858"></path>
							<path
								d="M512 622.736m-250.074 0a250.074 250.074 0 1 0 500.148 0 250.074 250.074 0 1 0-500.148 0Z"
								fill="#FFE6BF"
								p-id="2859"></path>
							<path
								d="M512 372.662c138.112 0 250.074 111.962 250.074 250.074S650.112 872.81 512 872.81c-138.113 0-250.074-111.962-250.074-250.074S373.888 372.662 512 372.662m0-24.001c-151.126 0-274.075 122.95-274.075 274.075S360.874 896.811 512 896.811s274.075-122.95 274.075-274.076S663.126 348.661 512 348.661z"
								fill="#FFFFFF"
								p-id="2860"></path>
							<path
								d="M786.015 124.319h-548.03c-17.08 0-31.055-13.975-31.055-31.055s13.975-31.055 31.055-31.055h548.029c17.08 0 31.055 13.975 31.055 31.055 0.001 17.08-13.974 31.055-31.054 31.055z"
								fill="#ffffff"
								p-id="2861"
								data-spm-anchor-id="a313x.7781069.0.i12"
								class="selected"></path>
							<path
								d="M627.439 699.539c0 20.677-4.692 39.105-14.077 55.287-9.385 16.187-22.51 28.764-39.372 37.741-16.871 8.977-36.18 13.468-57.94 13.468-25.843 0-48.082-5.916-66.711-17.752-18.634-11.832-31.351-28.079-38.148-48.757l37.947-22.44c5.161 14.687 13.463 26.11 24.887 34.272 11.424 8.161 25.431 12.24 42.025 12.24 18.493 0 33.386-5.916 44.678-17.748 11.283-11.832 16.932-27.264 16.932-46.31 0-19.585-5.649-34.947-16.932-46.104-11.293-11.152-26.725-16.73-46.31-16.73-19.857 0-34.68 6.394-44.472 19.177l-28.97-31.417 108.53-113.836H424.654v-42.846h187.691v34.684l-86.91 91.804c19.585 0.272 37.131 4.894 52.633 13.871 15.507 8.977 27.606 21.423 36.316 37.333 8.7 15.914 13.055 33.938 13.055 54.063z"
								p-id="2862"></path>
						</svg>
					);
				return index + 1;
			},
			countAchievement(score) {
				console.log(score);
				return <AchimentBox />;
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
		},
		mounted() {
			//获取高分排行榜
			axios({
				//上一行是build前状态，下一行是本地跨域配置
				url: 'http://43.138.47.105/api/leaderboard',
				// url: 'http://localhost:8080/api/leaderboard',
				method: 'get',
			}).then((result) => {
				// console.log(result.data);
				this.rankList_high = result.data;
			});
			//获取实时排行榜
			axios({
				//上一行是build前状态，下一行是本地跨域配置
				url: 'http://43.138.47.105/api/currentboard',
				// url: 'http://localhost:8080/api/currentboard',
				method: 'get',
			}).then((result) => {
				// console.log(result.data);
				this.rankList_time = result.data;
			});
		},
	};
</script>

<style scoped>
	.ListContainer {
		position: absolute;
		top: 50px;
		height: 600px;
		/* width: 500px; */
		background-color: bisque;
		display: flex;
		flex-direction: column;
		left: calc(50% - 250px);
		padding-top: 10px;
		/* padding-left: 80px; */
		border-radius: 10px;
		z-index: 1000;
	}
	.closeList {
		position: absolute;
		right: 10px;
		cursor: pointer;
	}
</style>
